@use "sass:color";
@use "sass:math";
@import "../css/variables";

.code-examples {
  width: 100%;
  border-radius: $border-radius;
  font-size: 15px;
  line-height: 1.4;

  .code-examples-tabs {
    color: #fff;
    display: flex;
    flex-direction: row;

    .code-examples-tab {
      width: 7rem;
      text-align: center;
      background-color: $code-bg-inactive;
      padding: math.div($spacer, 1.9) 0;
      cursor: pointer;
      transition: $button-background-transition;

      &:first-child {
        border-top-left-radius: $border-radius;
      }

      &:last-child {
        border-top-right-radius: $border-radius;
      }

      &.active {
        background-color: $code-bg;
      }

      &:not(.active):hover {
        background-color: color.adjust($code-bg, $lightness: -5%);
      }
    }
  }

  &.wide {
    .code-examples-tabs {
      .code-examples-tab {
        flex: 1;
      }
    }
  }

  .code-examples-content {
    background-color: $code-bg;
    border-bottom-right-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
  }

  &:not(.wide) {
    .code-examples-content {
      border-top-right-radius: $border-radius;
    }
  }

  @media (max-width: $xl) {
    font-size: $font-size-mini * 0.9;
  }
}
